<template>
  <div class="policy-result-wrapper">
    <div class="title-more">
      <div class="title">可申报政策</div>
      <ReadMore />
    </div>

    <div v-if="!fetchingData" class="h-[400px] flex items-center justify-center">
      <a-empty :image="simpleImage" description="暂无数据" />
    </div>

    <PolicyList v-else :data-list="policyList" :loading="loading" mode="list" />
  </div>
</template>

<script lang="ts">
import { Empty } from 'ant-design-vue'
import Vue from 'vue'
import { mapGetters } from 'vuex'
import ReadMore from '@/components/index/ReadMore.vue'
import PolicyList from '@/components/portal/policy/PolicyList.vue'
export default Vue.extend({
  components: { ReadMore, PolicyList },
  props: {
    loading: Boolean,
    policyList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    }
  },
  head: {
    title: '政策匹配结果',
  },
  computed: {
    ...mapGetters('policy', ['fetchingData']),
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.policy-result-wrapper {
  width: 1140px;
  margin: 0 auto;

  .title-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;

    .title {
      font-size: 24px;
      color: #444451;
    }
  }
}
</style>
